<template>
  <div class="flex-container">
    <!-- 搜索表单 -->
    <div class="search-form">
      <a-form layout="inline">
        <a-form-item label="姓名">
          <a-input v-model="searchForm.user_name" placeholder="请输入姓名" allowClear />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">搜索</a-button>
          <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 表格 -->
    <div class="table-container">
      <vxe-table :data="tableData" :loading="tableLoading" border stripe resizable show-overflow="tooltip">
        <vxe-column field="url" title="url"></vxe-column>
        <vxe-column field="client_ip" title="client_ip"></vxe-column>
        <vxe-column field="request_headers" title="request_headers"></vxe-column>
        <vxe-column field="request_body" title="request_body"></vxe-column>
        <vxe-column field="response_status" title="response_status"></vxe-column>
        <vxe-column field="response_body" title="response_body"></vxe-column>
        <vxe-column field="duration" title="duration"></vxe-column>
        <vxe-column field="created_at" title="created_at">
          <template #default="{row}">
            <span>{{moment(row.created_at).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </vxe-column>
        <vxe-column field="user_info" title="user_info"></vxe-column>
        <vxe-column field="user_name" title="user_name"></vxe-column>
      </vxe-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <a-pagination v-model="pagination.page" :total="pagination.total" :page-size="pagination.page_size"
          :page-size-options="['10', '20', '30', '40']" show-size-changer show-quick-jumper
          :show-total="total => `共 ${total} 条记录`" @change="handlePageChange" @showSizeChange="handleSizeChange" />
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'

  import {
    apiGetLogs,
  } from '@/api/featch'

  export default {
    name: 'Log',
    data() {
      return {
        moment,
        // 表格数据
        tableData: [],
        tableLoading: false,

        // 搜索表单
        searchForm: {
          user_name: '',
          page: 1,
          page_size: 10
        },

        // 分页信息
        pagination: {
          total: 0,
          page: 1,
          page_size: 10,
          total_pages: 0
        },
      }
    },
    mounted() {
      this.handleGetTableData()
    },
    methods: {
      /**
       * @description 获取表格数据
       */
      handleGetTableData() {
        this.tableLoading = true
        apiGetLogs(this.searchForm)
          .then(res => {
            this.tableLoading = false
            if (res.code === 200) {
              res.data.logs.map(item => {
                item.user_name = item.user_info ? JSON.parse(item.user_info).person_name : ''
              })
              this.tableData = res.data.logs

              this.pagination.page = res.data.page
              this.pagination.page_size = res.data.page_size
              this.pagination.total = res.data.total
              this.pagination.totalPages = res.data.totalPages
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(err => {
            this.tableLoading = false
            this.$message.error(err.toString())
          })
      },
      /**
       * @description 搜索
       */
      handleSearch() {
        this.searchForm.page = 1
        this.handleGetTableData()
      },
      /**
       * @description 重置搜索
       */
      handleReset() {
        this.searchForm = {
          user_name: '',
          page: 1,
          page_size: 10
        }
        this.handleGetTableData()
      },
      /**
       * @description 页码改变
       */
      handlePageChange(page) {
        this.searchForm.page = page
        this.handleGetTableData()
      },
      /**
       * @description 每页条数改变
       */
      handleSizeChange(current, size) {
        this.searchForm.page = 1
        this.searchForm.page_size = size
        this.handleGetTableData()
      }
    }
  }
</script>

<style lang="less" scoped>
  .flex-container {
    display: flex;
    height: 100%;
    width: 100%;
    padding: 12px;

    .search-form {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-form-left {
        flex: 1;
      }

      .search-form-right {
        margin-left: 16px;
      }
    }

    .table-container {
      position: relative;
    }

    .pagination-container {
      margin-top: 16px;
      text-align: right;
    }
  }
</style>